<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 09:49:05
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 10:05:35
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===ref==={{ count }}==={{ str }}==={{ flag }}=={{ obj.age }}=={{ arr }}
    <button @click="btn">按钮</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: '',
  setup () {
    let count = ref(1)
    let str = ref('rose')
    let flag = ref(false)
    let obj = ref({
      age: 11,
      name: 'rose'
    })
    let arr = ref([1, 2, 3])
    const btn = () => {
      // console.log(count, 77);
      count.value += 3
      str.value = 'jack'
      flag.value = true
      arr.value.push(4)

      // obj.value = 'rose'
      // console.log(obj);
      /* 
      不需要.value
        reactive()===
      需要.value
        toRef()
        toRefs()
        ref()
      */
    }
    return { btn, count, str, flag, obj, arr }
  }
}
</script>
<style lang='less'  scoped>
</style>